import React from 'react';

const TailwindExample: React.FC = () => {
  return (
    <div className="p-6 bg-white rounded-lg shadow-base">
      <h2 className="text-2xl font-bold text-heading mb-4">
        Tailwind CSS 示例组件
      </h2>
      
      <div className="space-y-4">
        {/* 颜色示例 */}
        <div className="flex space-x-2">
          <div className="w-8 h-8 bg-primary rounded"></div>
          <div className="w-8 h-8 bg-success rounded"></div>
          <div className="w-8 h-8 bg-warning rounded"></div>
          <div className="w-8 h-8 bg-error rounded"></div>
        </div>
        
        {/* 按钮示例 */}
        <div className="flex space-x-2">
          <button className="px-4 py-2 bg-primary text-white rounded-base hover:bg-primary-dark transition-colors">
            主要按钮
          </button>
          <button className="px-4 py-2 bg-success text-white rounded-base hover:opacity-80 transition-opacity">
            成功按钮
          </button>
          <button className="px-4 py-2 bg-warning text-white rounded-base hover:opacity-80 transition-opacity">
            警告按钮
          </button>
        </div>
        
        {/* 卡片示例 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="p-4 border border-border rounded-lg">
            <h3 className="text-lg font-semibold text-heading mb-2">卡片 1</h3>
            <p className="text-text-secondary">这是一个使用 Tailwind CSS 样式的卡片组件。</p>
          </div>
          <div className="p-4 border border-border rounded-lg">
            <h3 className="text-lg font-semibold text-heading mb-2">卡片 2</h3>
            <p className="text-text-secondary">Tailwind CSS 提供了丰富的工具类。</p>
          </div>
          <div className="p-4 border border-border rounded-lg">
            <h3 className="text-lg font-semibold text-heading mb-2">卡片 3</h3>
            <p className="text-text-secondary">可以与 Ant Design 组件完美配合使用。</p>
          </div>
        </div>
        
        {/* 响应式示例 */}
        <div className="text-center">
          <p className="text-sm text-text-secondary">
            当前屏幕尺寸：
            <span className="block sm:hidden">xs (移动端)</span>
            <span className="hidden sm:block md:hidden">sm (平板)</span>
            <span className="hidden md:block lg:hidden">md (小屏桌面)</span>
            <span className="hidden lg:block xl:hidden">lg (大屏桌面)</span>
            <span className="hidden xl:block">xl (超大屏)</span>
          </p>
        </div>
      </div>
    </div>
  );
};

export default TailwindExample; 